<template>
  <div class="cart">
    <Header>
      <template v-slot:icon-l><i class="iconfont icon-fanhui" @click='goBack'></i></template>
      <div class="title">购物车</div>
      <template v-slot:icon-r>
        <span class="icons" @click="isNavBar" v-if="list.length" v-text="isNavStatus ? '完成' : '编辑'"></span>
        <span v-else></span>
      </template>
    </Header>
    <section v-if="list.length">
      <div class='cart-title'>
        <van-checkbox :value="isCheckedAll" @click="checkAllFn" checked-color="#b0352f"></van-checkbox>
        <span>商品</span>
      </div>
      <ul>
        <li v-for="(item, index) of list" :key="index">
          <div class='check'>
            <van-checkbox v-model="item.checked" checked-color="#b0352f" @click="CHECK_ITEM(item.goods_id)">
            </van-checkbox>
          </div>
          <h2>
            <img :src="item.goods_imgUrl" alt="">
          </h2>
          <div class='goods'>
            <div class='goods-title'>
              <span>{{ item.goods_name }}</span>

            </div>
            <div class='goods-price'>¥{{ item.goods_price.toFixed(2) }}</div>

          </div>
          <div class="counter">
            <i class='iconfont icon-lajitong' @click="delGoodsFn(item.goods_id)"></i>
            <van-stepper v-model="item.goods_num" integer @change="changeNum($event, item.goods_id)" />
          </div>
        </li>
      </ul>
    </section>
    <van-empty v-else-if="loginStatus" description="暂无数据" image="https://img01.yzcdn.cn/vant/custom-empty-image.png">
      <van-button round type="danger" class="bottom-button" @click="goHome">去首页</van-button>
    </van-empty>
    <van-empty v-else description="还未登录" image="https://img01.yzcdn.cn/vant/empty-image-default.png">
      <van-button round type="danger" class="bottom-button" @click="goLogin">去登录</van-button>
    </van-empty>
    <footer v-if="list.length">
      <div class='radio'>
        <van-checkbox :value="isCheckedAll" @click="checkAllFn" checked-color="#b0352f"></van-checkbox>
      </div>
      <div class='total' v-if="!isNavStatus">
        <div>
          共有
          <span class='total-active'>{{ total.num }}</span>
          件商品
        </div>
        <div>
          <span>总计：</span>
          <span class='total-active'>¥{{ total.price.toFixed(2) }} + 0茶币</span>
        </div>
      </div>
      <div class='order' v-if="isNavStatus" @click="delGoodsFn()">删除</div>
      <div class="order" v-else @click="goOrder">去结算</div>
    </footer>
    <Tabbar v-else></Tabbar>
  </div>
</template>

<script>
import Header from '@/components/common/Header.vue'
import Tabbar from '@/components/common/TabBar.vue'
import { Checkbox, Stepper, Empty, Button, Toast } from 'vant'
import { mapMutations, mapState, mapGetters, mapActions } from 'vuex'
export default {
  components: {
    Header,
    [Checkbox.name]: Checkbox,
    [Stepper.name]: Stepper,
    [Empty.name]: Empty,
    [Button.name]: Button,
    Tabbar
  },
  data() {
    return {
      value: 1,
      isNavStatus: false
    }
  },
  computed: {
    ...mapState({
      list: state => state.cart.list,
      loginStatus: state => state.user.loginStatus,
      selectList: state => state.cart.selectList
    }),
    goodsList() {
      return this.list.filter(v => {
        return this.selectList.indexOf(v.goods_id) != -1
      })
    },
    //全选状态
    ...mapGetters(['isCheckedAll', 'total'])
  },
  watch: {},
  methods: {
    goBack() {
      this.$router.back()
    },
    getData() {
      this.CART_LIST(null)
      if (!this.loginStatus) return
      this.$axios({
        url: '/api/selectCart',
        method: 'post',
        headers: {
          token: true
        }
      }).then(res => {
        if (!res) return
        let data = res.data.data
        data.forEach(v => {
          v['checked'] = true
        })
        this.CART_LIST(data)
      })
    },
    ...mapMutations(['CART_LIST', 'CHECK_ITEM', 'INIT_ORDER']),
    //跳转首页
    goHome() {
      this.$router.push({ name: 'home' })
    },
    //跳转登录页
    goLogin() {
      this.$router.push({ name: 'login' })
    },
    //全选按钮
    ...mapActions(['checkAllFn', 'delGoodsFn']),
    //编辑按钮
    isNavBar() {
      this.isNavStatus = !this.isNavStatus
    },
    //改变数量
    changeNum(num, id) {
      console.log(num, id);
      this.$axios({
        url: '/api/updateNum',
        method: 'post',
        headers: {
          token: true
        },
        data: {
          id,
          num
        }
      }).then(res => {
        console.log(res);
      })

    },
    //跳转订单页
    goOrder() {
      if (!this.selectList.length) return Toast('请选择商品')
      let newList = this.list.filter(v => {
        return this.selectList.indexOf(v.goods_id) != -1
      })
      newList = JSON.stringify(newList)
      this.$axios({
        url: '/api/addOrder',
        method: 'post',
        headers: {
          token: true
        },
        data: {
          orderArr: newList
        }
      }).then(res => {
        if (!res) return
        let orderArr = res.data.data
        //存储订单号
        this.INIT_ORDER(orderArr)
        this.$router.push({
          name: 'order', query: {
            detail: JSON.stringify(this.goodsList)
          }
        })
      })
    }
  },
  created() {
  },
  mounted() { },
  beforeCreate() { },
  beforeMount() { },
  beforeUpdate() { },
  updated() { },
  beforeDestroy() { },
  destroyed() { },
  activated() {
    this.getData()
  }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.cart {
  height: 100vh;

  .header {
    position: fixed;
    top: 0;
    z-index: 999;
    .title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
    }

    .icons {
      width: .8rem;
      height: .8rem;
    }

    ::v-deep .icon-l {
      width: auto;
    }
  }

  section {
    overflow: hidden;
    background-color: #f5f5f5;
    height: calc(100vh - 2.9333rem);
    padding-top: 1.6rem;
    .cart-title {
      display: flex;
      padding: 0.533333rem;

      span {
        padding: 0 0.4rem;
        font-weight: 500;
        font-size: 0.48rem;
      }
    }

    ul {
      display: flex;
      flex-direction: column;
      overflow: scroll;
      height: calc(100vh - 4.64rem);

      &::-webkit-scrollbar {
        display: none;
      }

      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.16rem 0.533333rem;
        margin: 0.213333rem 0;
        background-color: #fff;

        .goods {
          display: flex;
          flex-direction: column;
          font-size: 0.32rem;

          .goods-title {
            display: flex;
            padding: .16rem 0;

            i {
              font-size: 0.586666rem;
            }
          }

          .goods-price {
            padding: .16rem 0;
            color: #b0352f;
          }

          ::v-deep .van-stepper {
            text-align: right;
          }
        }

        .counter {
          text-align: right;
          line-height: .8rem;
        }

        img {
          width: 1.973333rem;
          height: 1.973333rem;
        }
      }
    }
  }
  .van-empty{
    transform: translateY(50%);
  }

  footer {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.28rem;
    width: 100%;
    left: 0;
    z-index: 999;
    background-color: #fff;
    bottom: 0;
    border-top: 0.053333rem solid #ccc;

    .radio {
      padding: 0 0.4rem;
    }

    .total {
      flex: 1;
      font-size: 0.32rem;

      .total-active {
        color: #b0352f;
      }
    }

    .order {
      width: 3.2rem;
      line-height: 1.28rem;
      color: #fff;
      text-align: center;
      font-size: 0.426666rem;
      background-color: #b0352f;
    }
  }

  .bottom-button {
    width: 160px;
    height: 40px;
  }
}
</style>
